<template>
  <div class="container">
    <div style="width: 100%;height: 320px;">
      <van-row type="flex" justify="space-around" align="center" style="padding:0px 8px;">
        <van-col style="width:100%;">
          <van-search v-model="queryParams.filtername" placeholder="请输入姓名或手机号" shape="round" @input="onSearch"></van-search>
        </van-col>
      </van-row>
    </div>
    <van-index-bar class="ss">
      <div v-for="(element,index) in pinYinData" :key="index">
        <van-index-anchor :index="getIndex(element)" />
        <van-row
          class="box_z"
          v-for="item in getDataList(element,index)"
          :key="item.id"
          @click="handlePushDetails(item.id)"
        >
          <van-col class="item" style="width: 50px;">
            <span class="familyname" :class="getBackgroundColor(item.id)">{{item.name.slice(0,1)}}</span>
          </van-col>
          <van-col
            class="item"
            style="border-bottom: 1px solid #ededed; width: calc(100% - 50px); padding: 0 2px 0 8px;"
          >
            <van-row
              class="box_big_info"
              style="width:100%;"
              @touchstart="gtouchstart(item)"
              @touchmove="gtouchmove()"
              @touchend="gtouchend(item)"
            >
              <van-col class="box_r">
                <span
                  style="font-size: 16px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; "
                >{{item.name}}</span>
              </van-col>
            </van-row>
          </van-col>
        </van-row>
      </div>
    </van-index-bar>
    <div class="num_footer">共{{total}}位客户</div>
  </div>
</template>
<script>
import {
  Search,
  List,
  Row,
  Col,
  Image,
  Dialog,
  Toast,
  IndexBar,
  IndexAnchor
} from 'vant';
import { authInfo, managerList } from '@/api/api';
import avatar_default from '@/assets/images/avatar_default.png';
import pinYin from 'pinyin';

export default {
  name: 'business-admin',

  data() {
    return {
      total: 0,
      list: [],
      loading: false,
      error: false,
      finished: false,
      avatar_default: avatar_default,
      isTop: 2,
      timeOutEvent: 0, // 长按事件定时器
      pinYinData: [
        { A: [] },
        { B: [] },
        { C: [] },
        { D: [] },
        { E: [] },
        { F: [] },
        { G: [] },
        { H: [] },
        { I: [] },
        { J: [] },
        { K: [] },
        { L: [] },
        { M: [] },
        { N: [] },
        { O: [] },
        { P: [] },
        { Q: [] },
        { R: [] },
        { S: [] },
        { T: [] },
        { U: [] },
        { V: [] },
        { W: [] },
        { X: [] },
        { Y: [] },
        { Z: [] }
      ],
      docmHeight: document.documentElement.clientHeight, //默认屏幕高度
      showHeight: document.documentElement.clientHeight, //实时屏幕高度
      hideshow: true, //显示或者隐藏footer
      indexList: [],
      queryParams:{
        page: 0,
        limit: 10,
        positionId: '',
        filtername: '',
        limit: 2147483647,
      }
    };
  },
  created() {
    if(this.$route.query.positionId != null && this.$route.query.positionId != undefined && this.$route.query.positionId != ''){
      this.queryParams.positionId = this.$route.query.positionId;
    }
    if(this.queryParams.positionId == 5001){
      document.title = '销售经理管理';
    }else if(this.queryParams.positionId == 6001){
      document.title = '联盟商管理';
    }else if(this.queryParams.positionId == 6002){
      document.title = '加盟商管理';
    }else if(this.queryParams.positionId == 6003){
      document.title = '代理商管理';
    }

    this.refreshUserInfo();
  },
  watch:{
      '$route'() {
          if(this.$route.query.positionId != null && this.$route.query.positionId != undefined && this.$route.query.positionId != ''){
            this.queryParams.positionId = this.$route.query.positionId;
          }
          if(this.queryParams.positionId == 5001){
            document.title = '销售经理管理';
          }else if(this.queryParams.positionId == 6001){
            document.title = '联盟商管理';
          }else if(this.queryParams.positionId == 6002){
            document.title = '加盟商管理';
          }else if(this.queryParams.positionId == 6003){
            document.title = '代理商管理';
          }
          this.refreshUserInfo();
      }
  },
  mounted() {
    // window.onresize监听页面高度的变化
    window.onresize = () => {
      return (() => {
        this.showHeight = document.body.clientHeight;
      })();
    };
  },
  methods: {
    refreshUserInfo() {
      authInfo().then(res => {
        this.queryParams.parentId = res.data.data.managerId;
        this.getManagerList();
      });
    },
    getBackgroundColor(id) {
      return 'familynameColor' + (id%10);
    },
    getIndex: function(params) {
      let that = this;
      let first_letter = Object.keys(params)[0];
      if (params[first_letter].length > 0) {
        return first_letter;
      } else {
        return '';
      }
    },
    getDataList: function(el, index) {
      let first_letter = Object.keys(el)[0];
      return el[first_letter];
    },
    getpinYinData() {
      let that = this;
      const arr = this.list;
      for (let index = 0; index < this.list.length; index++) {
        let data_item = this.list[index];
        let itemPInYinArr = pinYin(data_item.name, {
          style: pinYin.STYLE_FIRST_LETTER,
          heteronym: true
        });
        var panduan = itemPInYinArr[0][0].substring(0, 1);
        switch (panduan) {
          case 'a':
            that.pinYinData[0].A.push(data_item);
            break;
          case 'b':
            that.pinYinData[1].B.push(data_item);
            break;
          case 'c':
            that.pinYinData[2].C.push(data_item);
            break;
          case 'd':
            that.pinYinData[3].D.push(data_item);
            break;
          case 'e':
            that.pinYinData[4].E.push(data_item);
            break;
          case 'f':
            that.pinYinData[5].F.push(data_item);
            break;
          case 'g':
            that.pinYinData[6].G.push(data_item);
            break;
          case 'h':
            that.pinYinData[7].H.push(data_item);
            break;
          case 'i':
            that.pinYinData[8].I.push(data_item);
            break;
          case 'j':
            that.pinYinData[9].J.push(data_item);
            break;
          case 'k':
            that.pinYinData[10].K.push(data_item);
            break;
          case 'l':
            that.pinYinData[11].L.push(data_item);
            break;
          case 'm':
            that.pinYinData[12].M.push(data_item);
            break;
          case 'n':
            that.pinYinData[13].N.push(data_item);
            break;
          case 'o':
            that.pinYinData[14].O.push(data_item);
            break;
          case 'p':
            that.pinYinData[15].P.push(data_item);
            break;
          case 'q':
            that.pinYinData[16].Q.push(data_item);
            break;
          case 'r':
            that.pinYinData[17].R.push(data_item);
            break;
          case 's':
            that.pinYinData[18].S.push(data_item);
            break;
          case 't':
            that.pinYinData[19].T.push(data_item);
            break;
          case 'u':
            that.pinYinData[20].U.push(data_item);
            break;
          case 'v':
            that.pinYinData[21].V.push(data_item);
            break;
          case 'w':
            that.pinYinData[22].W.push(data_item);
            break;
          case 'x':
            that.pinYinData[23].X.push(data_item);
            break;
          case 'y':
            that.pinYinData[24].Y.push(data_item);
            break;
          case 'z':
            that.pinYinData[25].Z.push(data_item);
            break;
        }
      }
    },
    // 跳转路径
    handlePushDetails(managerId) {
      // this.$router.push(`/user/admin/detail/${managerId}`);
    },

    onSearch() {
      this.getManagerList();
    },

    getManagerList(){
       managerList(this.queryParams).then(res => {
        this.list = res.data.data.list;
        this.total = res.data.data.total;
        this.loading = false;
        this.finished = true;
        this.pinYinData.forEach(item => {
          item[Object.keys(item)[0]] = [];
        });
        this.getpinYinData();
       });
    },
  },

  components: {
    [Search.name]: Search,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col,
    [Image.name]: Image,
    [Image.Toast]: Toast,
    [IndexBar.name]: IndexBar,
    [IndexAnchor.name]: IndexAnchor,
    [Dialog.Component.name]: Dialog.Component
  }
};
</script>
<style lang="scss" scoped>
/deep/ .van-search {
  padding-left: 0;
}
.familyname{
  display:inline-block;
  width:50px;
  height:50px;
  font-size:36px;
  text-align:center;
  border-radius:7px;
}

.familynameColor1{
  background-color: #129b91;
  color:#fff;
}

.familynameColor2{
  background-color:#07bace;
  color:#fff;
}

.familynameColor3{
  background-color:#e92c6c;
  color:#fff;
}

.familynameColor4{
  background-color:#2996eb;
  color:#fff;
}

.familynameColor5{
  background-color: #ffa619;
  color:#fff;
}

.familynameColor6{
  background-color: #4eb55a;
  color:#fff;
}

.familynameColor7{
  background-color: #724abd;
  color:#fff;
}

.familynameColor8{
  background-color:#07bace;
  color:#fff;
}

.familynameColor9{
  background-color:#e92c6c;
  color:#fff;
}

.familynameColor0{
  background-color:#2996eb;
  color:#fff;
}

.ss {
  width: 100%;
  /* 占了百分百-flex:0的占位 */
  flex: 1;
  /* background: #143541; */
  font-size: 40px;
  text-align: left;
}
.num_footer {
  /* 占位用 */
  flex: 0;
  margin: 14px auto;
  /* background: #555555; */
  margin-bottom: 10px;
  font-size: 16px;
  color: rgba(157, 155, 155, 1);
}
.view-router {
  padding-bottom: 15px;
}
.icon_box {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: 50px;
  height: 50px;
}
// 用户分类模块
.user_classification_box {
  height: 272px;
  padding: 0 16px;
  background-color: #fff;
  .van-col {
    display: flex;
    align-items: center;
    height: 66px;
    width: 100%;
    span {
      height: 66px;
      line-height: 66px;
      width: calc(100% - 58px);
      border-bottom: 1px solid rgb(237, 237, 237);
      margin-left: 8px;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.box_z {
  padding: 0 16px;
}
.box_r {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 5px;
}
/deep/.van-index-bar__index {
  padding-right: 5px;
  font-size: 13px;
  line-height: 20px;
}
/deep/.van-index-anchor {
  background-color: #f5f6f7;
}
/deep/ .van-field__control {
  height: 30px;
  line-height: 30px;
}
/deep/ .van-field__left-icon .van-icon,
.van-field__right-icon .van-icon {
  height: 30px;
  line-height: 30px;
}
.publish {
  line-height: 30px;
  height: 30px;
  text-align: end;
  background-color: #ee3f00;
  border: 1px solid #ee3f00;
  border-radius: 4px;
  font-size: 12px;
  padding: 0 3px 0 10px;
  // letter-spacing: 5px;
  color: white;
  margin-left: 10px;
  white-space: nowrap;
}

.container {
  /* 因为是遮罩效果所以要fixed */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background: #fff;
  /*必须 */
  display: flex;
  /* 必须，规定元素的排列方向 */
  flex-direction: column;
  /* 必须占满屏 */
  height: 100%;
  /* 没有这个就不能滚动了 */
  overflow: auto;
  background-color: white;
  -webkit-touch-callout: none; /*系统默认菜单被禁用*/
  -webkit-user-select: none; /*webkit浏览器*/
  -khtml-user-select: none; /*早期浏览器*/
  -moz-user-select: none; /*火狐*/
  -ms-user-select: none; /*IE10*/
  user-select: none;
  // padding: 0px 16px;
}

input {
  -webkit-user-select: auto;
}

.top-time {
  color: #bbbbbb;
  text-align: end;
  padding-right: 14px;
}
.top-back {
  background-color: white;
}
.not-top {
  background-color: #f5f4f4;
}
.mr-fk {
  background-color: #bbbbbb;
}
.user-add {
  text-align: center;
  color: $orange;
  margin-top: 18px;
}
.item {
  display: flex;
  align-items: center;
  height: 66px;
}
.van-search {
  padding: 10px 0px;
}

.van-search .van-cell {
  padding: 3px 8px 3px 0;
}

.img-radius {
  border: 0;
  border-radius: 7px;
  vertical-align: middle;
}
</style>
